<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Hello World</title>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

  <!-- Don't use this in production: -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>

<body>
  <div id="root"></div>

  <script type="text/babel">

    const { useState, useEffect, createContext, useContext } = React

    // 1.创建环境对象
    const MyContext = createContext()

    function Child() {
      // const { count, setCount } = props
      const { count, setCount } = useContext(MyContext)
      return <>
        <h3> 子组件 - {count}</h3>
        <button onClick={() => setCount(count + 1)}> 加 </button>
      </>
    }

    function Parent() {
      // const { count, setCount } = props
      const { count, setCount } = useContext(MyContext)
      return <>
        <h2> 父组件 - {count}</h2>
        <Child />
      </>
    }

    function MyApp() {
      const [count, setCount] = useState(0)

      return <>
        {/* 2.配置环境对象，并传值 */}
        <MyContext.Provider value={{ count, setCount }}>
          <h1>根组件 - {count}</h1>
          <Parent />
        </MyContext.Provider>
      </>
    }

    // 浏览器DOM对象
    const container = document.getElementById('root');
    // 浏览器DOM对象转换成reactDOM对象
    const root = ReactDOM.createRoot(container);
    root.render(<MyApp />);

    console.log(root);

  </script>

</body>

</html>